<template>
  <div class="app-container">
    <!-- 品牌 -->
    <el-card class="box-card" style="min-height: 80vh" v-loading="brandLoading">
      <div slot="header" class="clearfix">
        <!-- 头部左侧 -->
        <div class="media-display">
          <el-link :underline="false" style="font-size: 20px">添加品牌</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link :underline="false" style="font-size: 20px">Brand</el-link>
        </div>
      </div>
      <!-- 内容 -->
      <div class="text" style="width: 60vw">

        <el-form :model="brandForm" ref="brandForm" :rules="brandRules" label-width="100px" class="demo-brand" >
          <!-- 选择分区组件 -->
          <category></category>
          <el-form-item label="品牌 ID">
            <el-input  placeholder="品牌id后台自动生成，不能填写！" disabled></el-input>
          </el-form-item>
          <el-form-item label="品牌名称" prop="brandName">
            <el-input v-model="brandForm.brandName" placeholder="品牌的名称，可以中文或者英文，不能重复" maxlength="10" show-word-limit ></el-input>
          </el-form-item>

          <!-- upload -->
          <el-form-item label="品牌主图">
            <brandUpload :limit="1" :multiple="false" ref="brandImgUpload" formDataName="brandImg"></brandUpload>
          </el-form-item>

          <el-form-item label="品牌描述" prop="describe">
            <el-input type="textarea"
                      v-model="brandForm.describe"
                      maxlength="100"
                      show-word-limit
                      placeholder="一小段话，介绍你的品牌"
                      resize="none">
            </el-input>
          </el-form-item>

          <el-form-item label="品牌状态" prop="state">
            <el-switch
              v-model="brandForm.state"
              :active-value="1"
              :inactive-value="0"
              active-text="正常"
              inactive-text="锁定">
            </el-switch>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm()">新增品牌</el-button>
            <el-button @click="resetForm()" type="danger">重置</el-button>
          </el-form-item>
        </el-form>

      </div>
    </el-card>
  </div>
</template>


<script>
  import { mapGetters } from 'vuex'
  import brandUpload from '@/views/brand/brandUpload'
  import Category from '@/views/brand/category'
  import request from '@/utils/request'
  import { submitBrand, isExit } from '@/api/brand'

  export default {
    name: "brand",
    components: { Category, brandUpload },
    data() {
      return {
        brandRules: {
          brandName: [
            { required: true, message: '请选输入产品id', trigger: 'blur' },
            { validator: (rule, value, callback) => {
                console.log(this.brandForm)
                if (value) {
                  if (/\s/g.test(value)) {
                    callback(new Error("不能有空格"));
                  } else {
                    isExit({ categoryId: this.brandForm.categoryId[0], brandName: value })
                      .then(res => {
                        if (res.data.result === false){
                          callback();
                        }else {
                          callback(new Error("品牌名称重复"));
                        }
                      })
                  }
                }
              }, trigger: 'blur' },
          ],
          describe: [
            { required: true, message: '请输入品牌描述', trigger: 'blur' }
          ],
        },
        brandLoading: false,
      };
    },
    methods: {
      submitForm(){
        let brandImgUpload = this.$refs.brandImgUpload

        this.$refs['brandForm'].validate((valid) => {
          if (valid) {
            this.$store.commit('brand/clearBrandAllInfo')// 清空vuex中的allInfo，防止重复资源上传

            const result = brandImgUpload.submitUpload()
            console.log("result ",result)
            if (result) {
              console.log(this.brandForm)
              console.log("成功");
              this.brandLoading = true;
              this.$store.commit('brand/setCategoryId', this.brandForm.categoryId[0])
              let brandJson = {key: "brandFormStr", value: JSON.stringify(this.brandForm)}
              this.$store.commit('brand/setBrandAllInfo', brandJson)// 将信息加入vuex

              submitBrand(this.brandAllInfo).then(response => {
                console.log(response)
                if (response.state === true) {
                  this.resetForm()
                  this.$notify.success({title: '成功',message: response.message});
                } else {
                  this.$notify.warning({ title: '失败', message: response.message, duration: 1500 });
                }
              }).finally(()=>this.brandLoading = false)
            }
          } else {
            this.$notify.warning({ title: '失败', message: "信息还未填写完成", duration: 1500 });
          }
        });

      },
      resetForm() {
        this.$refs['brandForm'].resetFields();
        this.$refs.brandImgUpload.resetForm()
        this.$store.commit('brand/reset')// 重置vuex
      },
    },
    computed: {
      ...mapGetters(['brandAllInfo','brandForm']),//数组写法
    },
    beforeMount (){//初始化数据
    },
    mounted(){
    },
  }
</script>

<style scoped>

  .info{
    color: #909399;
  }
  .clearfix{
    display: flex;
    align-items: center;
  }
  .text {
    font-size: 14px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .el-form-item{
    margin-bottom: 35px;
  }
</style>
